import{_ as r}from"./index.vue_vue_type_style_index_0_lang2.js";import{_ as d}from"./index.vue_vue_type_style_index_0_lang3.js";import{d as c,$ as e,e as m,r as k,P as p,Q as g,K as n,a2 as u,a5 as y,R as s}from"./elementPlusModules.js";const N=s("p",null,"通过属性 toolbar 定义顶部工具栏展示，默认有列设置及导出按钮，可以通过对象形式传入自定义的按钮配置",-1),f=s("p",null,"通过事件 tool-click 函数监听工具触发事件",-1),J=c({__name:"Toolbar",setup(v){const t=e(d,{size:"16"},{default:()=>[e("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},[e("path",{d:"M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"},null)])]}),i=m(`
<template>
  <div style="height: 70vh">
    <MerakXTable
      :columns-by-store="JSON.parse(JSON.stringify(state.columns))"
      :columns="state.columns"
      :data="state.data"
      :pagination="false"
      :toolbar="[{ type: 'add', title: '新增', icon: Icon }, 'setting']"
      @tool-click="handleToolClick"
    >
    </MerakXTable>
  </div>
</template>

<script setup lang="tsx">
import { reactive } from "vue";

import MerakXTable, { MerakXTableInstance, MerakXTableColumn } from "../../../../../components/MerakXTable";
import MerakIcon from "../../../../../components/MerakIcon/index.vue";

const Icon = (
  <MerakIcon size="16">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
    </svg>
  </MerakIcon>
);

const state = reactive<{
  columns: MerakXTableColumn[];
  data: any[];
}>({
  columns: [
    { field: "name", title: "Name" },
    { field: "age", title: "Age" },
    { field: "address", title: "Address" }
  ],
  data: [
    {
      id: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
      description: "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."
    },
    {
      id: "2",
      name: "Jim Green",
      age: 42,
      address: "London No. 1 Lake Park",
      description: "My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."
    },
    {
      id: "3",
      name: "Not Expandable",
      age: 29,
      address: "Jiangsu No. 1 Lake Park",
      description: "This not expandable"
    },
    {
      id: "4",
      name: "Joe Black",
      age: 32,
      address: "Sydney No. 1 Lake Park",
      description: "My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park."
    }
  ]
});

const handleToolClick: MerakXTableInstance["onTool-click"] = type => {
  console.log(type);
};
<\/script>
`),a=k({columns:[{field:"name",title:"Name"},{field:"age",title:"Age"},{field:"address",title:"Address"}],data:[{id:"1",name:"John Brown",age:32,address:"New York No. 1 Lake Park",description:"My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."},{id:"2",name:"Jim Green",age:42,address:"London No. 1 Lake Park",description:"My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."},{id:"3",name:"Not Expandable",age:29,address:"Jiangsu No. 1 Lake Park",description:"This not expandable"},{id:"4",name:"Joe Black",age:32,address:"Sydney No. 1 Lake Park",description:"My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park."}]}),l=o=>{console.log(o)};return(o,h)=>(p(),g(y,null,[N,f,e(n(r),{"columns-by-store":JSON.parse(JSON.stringify(a.columns)),columns:a.columns,data:a.data,pagination:!1,toolbar:[{type:"add",title:"新增",icon:n(t)},"setting"],onToolClick:l},null,8,["columns-by-store","columns","data","toolbar"]),u(o.$slots,"default",{html:i.value})],64))}});export{J as _};
